<template>
    <view class="year-card">
        <image class="bg" mode="widthFix" :src="year_card_image"></image>
        <view class="content">
            <tm-text :font-size="32" color="#A37C3D" :label="item.date"></tm-text>
            <template v-if="item?.dictCode">
                <view :style="{ backgroundColor: fortuneType.color }" class="status-box"></view>
                <tm-text class="mt-4" :font-size="20" :color="fortuneType.color" :label="fortuneType.text"></tm-text>
            </template>
        </view>
    </view>
</template>
<script setup lang="ts">
    import year_card_image from '/static/assets/images/index/year-card-bg.png'
    import { useYearlyFortuneStore } from '@/stores/yearlyFortune';
    import { computed } from 'vue';

    const yearlyFortuneStore = useYearlyFortuneStore();

    const fortuneType = computed(() => {
        const fortuneType = yearlyFortuneStore.fortuneTypeList?.find(item => item.dictCode === props.item?.dictCode) || {};
        return {
            text: fortuneType?.dictLabel || '',
            color: colorMap[fortuneType?.dictLabel] || ''
        }
    })

    const colorMap = {
        '极好': '#327929',
        '好': '#327929',
        '普通': '#C9A129',
        '极差': '#F06340',
        '差': '#F06340'
    }

    const props = defineProps({
        item: {
            type: Object,
            default: {}
        }
    })
</script>
<style lang="less" scoped>
    .year-card {
        position: relative;
        z-index: 0;
        height: 264rpx;

        .bg {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1
        }

        .content {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin-top: 80%;

            .status-box {
                height: 8rpx;
                width: 8rpx;
                margin-top: 6rpx;
                transform: rotateZ(45deg);
                transform-origin: center center;
            }
        }
    }
</style>